<ng-container card-body-head>
  <div class="body-head mb-3">
    <div class="type-filter">
      <mat-select
        class="form-control selected"
        [ngModel]="operation"
        (ngModelChange)="onOperation($event)"
      >
        <mat-option [value]="0">全部</mat-option>
        <mat-option [value]="1108">添加白名单</mat-option>
        <mat-option [value]="1109">移除白名单</mat-option>
        <mat-option [value]="1110">接入终端</mat-option>
        <mat-option [value]="1111">移除终端</mat-option>
      </mat-select>

      <div class="search">
        <div class="search-input">
          <input
            type="text"
            class="form-control"
            placeholder="请输入关键词..."
            [ngModel]="searchKey"
            #keyword
            (keyup.enter)="onSearchKey(keyword.value, true)"
            (blur)="onSearchKey(keyword.value, false)"
          />
        </div>
        <div>
          <button
            class="btn btn-light m-btn m-btn--icon m-btn--icon-only m-btn--pill"
            (click)="startSearch()"
          >
            <i class="flaticon-search"></i>
          </button>
        </div>
      </div>
    </div>
  </div>
</ng-container>
<m-data-table *ngIf="result$ | async as result" [data]="result.list" [result]="result">
  <ng-container mDataTableColumn header="设备别名">
    <ng-template let-device_name="device_name">
      <td>{{ device_name }}</td>
    </ng-template>
  </ng-container>
  <ng-container mDataTableColumn header="角色">
    <ng-template let-user_type_desc="user_type_desc">
      <td>{{ user_type_desc }}</td>
    </ng-template>
  </ng-container>
  <ng-container mDataTableColumn header="姓名">
    <ng-template let-username="username">
      <td>{{ username }}</td>
    </ng-template>
  </ng-container>
  <ng-container mDataTableColumn header="终端别名">
    <ng-template let-pc_name="pc_name">
      <td>{{ pc_name }}</td>
    </ng-template>
  </ng-container>
  <ng-container mDataTableColumn header="操作类型">
    <ng-template let-operation_desc="operation_desc">
      <td>{{ operation_desc }}</td>
    </ng-template>
  </ng-container>
  <ng-container mDataTableColumn header="行为时间">
    <ng-template let-created_at="created_at">
      <td>{{ created_at | date }}</td>
    </ng-template>
  </ng-container>
  <m-pagination [length]="result.total" [pageSize]="result.pageSize" [result]="result">
  </m-pagination>
</m-data-table>
